<template>
    <div class="area-stats-container">
      <div class="stats-header">
        <h3>面积统计</h3>
        <div class="total-area">总面积: {{ totalArea }}px²</div>
      </div>
      
      <!-- 房间ID显示 -->
      <div class="room-id-section">
        <div class="room-id-label">房间ID</div>
        <div class="room-id-value">{{ roomStore.roomId }}</div>
        <button @click="copyRoomId" class="copy-room-id-btn">📋</button>
      </div>
      <div class="stats-list">
        <div 
          v-for="(area, color) in sortedAreas" 
          :key="color" 
          class="area-item"
          :class="{ 'top-area': indexOf(color) < 3 }"
        >
          <div class="area-info">
            <div :class="['color-indicator', color]"></div>
            <span class="color-name">{{ getColorName(color) }}</span>
          </div>
          <div class="area-percentage">{{ ((area / total) * 100).toFixed(1) }}%</div>
          <div class="area-progress">
            <div 
              class="area-progress-bar" 
              :style="{ width: ((area / total) * 100) + '%', backgroundColor: getColorValue(color) }"
            ></div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { computed } from 'vue'
  import { useGameStore } from '@/stores/game'
  import { useRoomStore } from '@/stores/room'
  
  const gameStore = useGameStore()
  const roomStore = useRoomStore()
  const { areas } = gameStore
  const total = computed(() => Object.values(areas).reduce((a, b) => a + b, 0))
  
  // 按面积大小排序
  const sortedAreas = computed(() => {
    const sorted = {}
    Object.keys(areas)
      .sort((a, b) => areas[b] - areas[a])
      .forEach(key => {
        sorted[key] = areas[key]
      })
    return sorted
  })
  
  // 获取总面积（简单示例）
  const totalArea = computed(() => {
    // 假设画布尺寸为800x600
    return 800 * 600
  })
  
  // 直接使用颜色值作为显示名称
  const getColorName = (colorValue) => {
    const colorMap = {
      '#FF4136': '红色',
      '#0074D9': '蓝色',
      '#2ECC40': '绿色',
      '#FFDC00': '黄色',
      '#B10DC9': '紫色',
      '#FF851B': '橙色',
      '#39CCCC': '青色',
      '#FF1493': '粉色'
    }
    return colorMap[colorValue] || colorValue
  }
  
  // 直接返回颜色值
  const getColorValue = (colorValue) => {
    return colorValue || '#999'
  }
  
  // 获取颜色索引
  const indexOf = (colorKey) => {
    return Object.keys(sortedAreas.value).indexOf(colorKey)
  }
  // 复制房间ID到剪贴板
  const copyRoomId = async () => {
    if (roomStore.roomId) {
      try {
        await navigator.clipboard.writeText(roomStore.roomId)
        alert('房间ID已复制到剪贴板！')
      } catch (err) {
        console.error('复制失败:', err)
      }
    }
  }
  </script>
  
  <style scoped>
  .area-stats-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: var(--surface-glass);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  }
  
  .stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }
  
  /* 房间ID区域样式 */
  .room-id-section {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 8px;
    margin-bottom: 16px;
    border: 1px solid rgba(59, 130, 246, 0.3);
  }
  
  .room-id-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
  }
  
  .room-id-value {
    flex: 1;
    font-size: 13px;
    font-family: 'Courier New', monospace;
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    word-break: break-all;
  }
  
  .copy-room-id-btn {
    padding: 4px 8px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: var(--transition);
  }
  
  .copy-room-id-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
  }
  
  .stats-header h3 {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    margin: 0;
  }
  
  .total-area {
    font-size: 12px;
    color: var(--text-muted);
  }
  
  .stats-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
  }
  
  .area-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.3s ease;
  }
  
  .area-item:hover {
    background: rgba(255, 255, 255, 0.04);
    transform: translateX(4px);
  }
  
  .area-item.top-area {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .area-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
  }
  
  .color-indicator {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  
  .color-name {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
  }
  
  .area-percentage {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 45px;
    text-align: right;
  }
  
  .area-progress {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
  }
  
  .area-progress-bar {
    height: 100%;
    transition: width 0.5s ease;
    position: relative;
  }
  
  .area-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: slide 2s infinite;
  }
  
  @keyframes slide {
    0% { left: -100%; }
    100% { left: 100%; }
  }
  
  .color-indicator.player-red { background-color: var(--player-red); }
  .color-indicator.player-blue { background-color: var(--player-blue); }
  .color-indicator.player-green { background-color: var(--player-green); }
  .color-indicator.player-yellow { background-color: var(--player-yellow); }
  .color-indicator.player-purple { background-color: var(--player-purple); }
  
  @media (max-width: 480px) {
    .area-stats-container {
      padding: 12px;
    }
    
    .stats-header h3 {
      font-size: 14px;
    }
    
    .color-name {
      font-size: 12px;
    }
    
    .area-percentage {
      font-size: 12px;
      min-width: 40px;
    }
  }
  </style>